import Taro from '@tarojs/taro';
import { View, Text, Button } from '@tarojs/components';
import { AtIcon } from 'taro-ui';
import { Component, useEffect, useState } from 'react';
import './index.scss';

export default function NavCustomBar() {
    const [navHeight, setNavHeight] = useState(0);

    const getNavHeight = () => {
        let menuButtonObject = Taro.getMenuButtonBoundingClientRect(); //获取胶囊对象
        let menuButtonHeight = menuButtonObject.height; //获取胶囊高度
        let menuButtonTop = menuButtonObject.top; //获取胶囊距离顶部高度

        let sysinfo = Taro.getSystemInfoSync(); //获取设备系统对象
        let statusBarHeight = sysinfo.statusBarHeight; //获取状态栏高度

        let navBarHeight = statusBarHeight + menuButtonHeight + (menuButtonTop - statusBarHeight) * 2; //计算总高度

        console.log(statusBarHeight);
        setNavHeight(navBarHeight);
    };

    useEffect(() => {
        getNavHeight();
    }, []);

    return <div className='navCustomBar' style={{ height: ` ${navHeight}px` }}></div>;
}
